import { Avatar, Statistic } from 'antd'
import React from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import Avator from '~/assets/common/avator.png'
// import { Link, Dispatch, connect } from 'umi'
// import MyUpload from '~/components/my-upload'

// import Radar from './components/Radar'
// import { ModalState } from './model'
// import EditableLinkGroup from './components/EditableLinkGroup'
import './style.less'
import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d'
// const currentUser = {
//   name: '民警',
//   avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
//   userid: '00000001',
//   email: 'antdesign@alipay.com',
//   signature: '海纳百川，有容乃大',
//   title: '民警',
//   group: '上海浦东新区－辅警',
//   tags: [
//     { key: '0', label: '很有想法的' },
//     { key: '1', label: '专注设计' },
//     { key: '2', label: '辣~' },
//     { key: '3', label: '大长腿' },
//     { key: '4', label: '川妹子' },
//     { key: '5', label: '海纳百川' }
//   ],
//   notice: [
//     {
//       id: 'xxx1',
//       title: 'Alipay',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//       description: '那是一种内在的东西，他们到达不了，也无法触及的',
//       updatedAt: '2020-09-07T22:35:40.455Z',
//       member: '科学搬砖组',
//       href: '',
//       memberLink: ''
//     },
//     {
//       id: 'xxx2',
//       title: 'Angular',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
//       description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
//       updatedAt: '2017-07-24T00:00:00.000Z',
//       member: '全组都是吴彦祖',
//       href: '',
//       memberLink: ''
//     },
//     {
//       id: 'xxx3',
//       title: 'Ant Design',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
//       description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
//       updatedAt: '2020-09-07T22:35:40.455Z',
//       member: '中二少女团',
//       href: '',
//       memberLink: ''
//     },
//     {
//       id: 'xxx4',
//       title: 'Ant Design Pro',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
//       description: '那时候我只会想自己想要什么，从不想自己拥有什么',
//       updatedAt: '2017-07-23T00:00:00.000Z',
//       member: '程序员日常',
//       href: '',
//       memberLink: ''
//     },
//     {
//       id: 'xxx5',
//       title: 'Bootstrap',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
//       description: '凛冬将至',
//       updatedAt: '2017-07-23T00:00:00.000Z',
//       member: '高逼格设计天团',
//       href: '',
//       memberLink: ''
//     },
//     {
//       id: 'xxx6',
//       title: 'React',
//       logo: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
//       description: '生命就像一盒巧克力，结果往往出人意料',
//       updatedAt: '2017-07-23T00:00:00.000Z',
//       member: '骗你来学计算机',
//       href: '',
//       memberLink: ''
//     }
//   ],
//   notifyCount: 12,
//   unreadCount: 11,
//   country: 'China',
//   geographic: { province: { label: '浙江省', key: '330000' }, city: { label: '杭州市', key: '330100' } },
//   address: '西湖区工专路 77 号',
//   phone: '0752-268888888'
// }

// const activities = [
//   {
//     id: 'trend-1',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '曲丽丽', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png' },
//     group: { name: '高逼格设计天团', link: 'http://github.com/' },
//     project: { name: '六月迭代', link: 'http://github.com/' },
//     template: '在 @{group} 新建项目 @{project}'
//   },
//   {
//     id: 'trend-2',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '付小小', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png' },
//     group: { name: '高逼格设计天团', link: 'http://github.com/' },
//     project: { name: '六月迭代', link: 'http://github.com/' },
//     template: '在 @{group} 新建项目 @{project}'
//   },
//   {
//     id: 'trend-3',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '林东东', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png' },
//     group: { name: '中二少女团', link: 'http://github.com/' },
//     project: { name: '六月迭代', link: 'http://github.com/' },
//     template: '在 @{group} 新建项目 @{project}'
//   },
//   {
//     id: 'trend-4',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '周星星', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png' },
//     project: { name: '5 月日常迭代', link: 'http://github.com/' },
//     template: '将 @{project} 更新至已发布状态'
//   },
//   {
//     id: 'trend-5',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '朱偏右', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png' },
//     project: { name: '工程效能', link: 'http://github.com/' },
//     comment: { name: '留言', link: 'http://github.com/' },
//     template: '在 @{project} 发布了 @{comment}'
//   },
//   {
//     id: 'trend-6',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     user: { name: '乐哥', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png' },
//     group: { name: '程序员日常', link: 'http://github.com/' },
//     project: { name: '品牌迭代', link: 'http://github.com/' },
//     template: '在 @{group} 新建项目 @{project}'
//   }
// ]
// const projectNotice = [
//   {
//     id: 'xxx1',
//     title: 'Alipay',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//     description: '那是一种内在的东西，他们到达不了，也无法触及的',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     member: '科学搬砖组',
//     href: '',
//     memberLink: ''
//   },
//   {
//     id: 'xxx2',
//     title: 'Angular',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
//     description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
//     updatedAt: '2017-07-24T00:00:00.000Z',
//     member: '全组都是吴彦祖',
//     href: '',
//     memberLink: ''
//   },
//   {
//     id: 'xxx3',
//     title: 'Ant Design',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
//     description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
//     updatedAt: '2020-09-07T22:35:40.260Z',
//     member: '中二少女团',
//     href: '',
//     memberLink: ''
//   },
//   {
//     id: 'xxx4',
//     title: 'Ant Design Pro',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
//     description: '那时候我只会想自己想要什么，从不想自己拥有什么',
//     updatedAt: '2017-07-23T00:00:00.000Z',
//     member: '程序员日常',
//     href: '',
//     memberLink: ''
//   },
//   {
//     id: 'xxx5',
//     title: 'Bootstrap',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
//     description: '凛冬将至',
//     updatedAt: '2017-07-23T00:00:00.000Z',
//     member: '高逼格设计天团',
//     href: '',
//     memberLink: ''
//   },
//   {
//     id: 'xxx6',
//     title: 'React',
//     logo: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
//     description: '生命就像一盒巧克力，结果往往出人意料',
//     updatedAt: '2017-07-23T00:00:00.000Z',
//     member: '骗你来学计算机',
//     href: '',
//     memberLink: ''
//   }
// ]
// const radarData = [
//   {
//     name: '个人',
//     label: '引用',
//     value: 10
//   },
//   {
//     name: '个人',
//     label: '口碑',
//     value: 8
//   },
//   {
//     name: '个人',
//     label: '产量',
//     value: 4
//   },
//   {
//     name: '个人',
//     label: '贡献',
//     value: 5
//   },
//   {
//     name: '个人',
//     label: '热度',
//     value: 7
//   },
//   {
//     name: '团队',
//     label: '引用',
//     value: 3
//   },
//   {
//     name: '团队',
//     label: '口碑',
//     value: 9
//   },
//   {
//     name: '团队',
//     label: '产量',
//     value: 6
//   },
//   {
//     name: '团队',
//     label: '贡献',
//     value: 3
//   },
//   {
//     name: '团队',
//     label: '热度',
//     value: 1
//   },
//   {
//     name: '部门',
//     label: '引用',
//     value: 4
//   },
//   {
//     name: '部门',
//     label: '口碑',
//     value: 1
//   },
//   {
//     name: '部门',
//     label: '产量',
//     value: 6
//   },
//   {
//     name: '部门',
//     label: '贡献',
//     value: 5
//   },
//   {
//     name: '部门',
//     label: '热度',
//     value: 7
//   }
// ]

// const links = [
//   {
//     title: '操作一',
//     href: ''
//   },
//   {
//     title: '操作二',
//     href: ''
//   },
//   {
//     title: '操作三',
//     href: ''
//   },
//   {
//     title: '操作四',
//     href: ''
//   },
//   {
//     title: '操作五',
//     href: ''
//   },
//   {
//     title: '操作六',
//     href: ''
//   }
// ]

interface PAGENAMEUPPERCAMELCASEProps {
  currentUser?: CurrentUser
  projectNotice: NoticeType[]
  activities: ActivitiesType[]
  radarData: RadarDataType[]
  currentUserLoading: boolean
  projectLoading: boolean
  activitiesLoading: boolean
}

const PageHeaderContent: React.FC = () => {
  // console.log('currentUser', currentUser)
  // const loading = currentUser && Object.keys(currentUser).length
  // if (!loading) {
  //   return <Skeleton avatar paragraph={{ rows: 1 }} active />
  // }
  return (
    <div className="pageHeaderConten" style={{ display: 'flex', alignItems: 'center' }}>
      <div className="avatar">
        <Avatar size="large" src={Avator} />
      </div>
      <div className="content">
        <div className="contentTitle">{JSON.parse(localStorage.getItem('u')!).userName} 祝你开心每一天！</div>
        <div>{/* {currentUser.title} |{currentUser.group} */}</div>
      </div>
    </div>
  )
}

const ExtraContent: React.FC<{}> = () => (
  <div className="extraContent">
    <div className="statItem">
      <Statistic title="案件数" value={56} />
    </div>
    <div className="statItem">
      <Statistic title="案件数排名" value={8} suffix="/ 24" />
    </div>
    <div className="statItem">
      <Statistic title="案件移送" value={2223} />
    </div>
  </div>
)

const PAGENAMEUPPERCAMELCASE = () => {
  // const renderActivities = (item: any) => {
  //   const events = item.template.split(/@\{([^{}]*)\}/gi).map((key: any) => {
  //     if (item[key]) {
  //       return (
  //         <a href={item[key].link} key={item[key].name}>
  //           {item[key].name}
  //         </a>
  //       )
  //     }
  //     return key
  //   })
  //   return (
  //     <List.Item key={item.id}>
  //       <List.Item.Meta
  //         avatar={<Avatar src={item.user.avatar} />}
  //         title={
  //           <span>
  //             <a className="username">{item.user.name}</a>
  //             &nbsp;
  //             <span className="event">{events}</span>
  //           </span>
  //         }
  //         description={
  //           <span className="datetime" title={item.updatedAt}>
  //             {moment(item.updatedAt).fromNow()}
  //           </span>
  //         }
  //       />
  //     </List.Item>
  //   )
  // }

  // const onSuccess = (data: any) => {
  //   console.log('successshomeee', data)
  // }

  return (
    <PageContainer style={{ margin: '-24px' }} content={<PageHeaderContent />} extraContent={<ExtraContent />}>
      {/* <Row>
        <Col xl={16} lg={24} md={24} sm={24} xs={24}>
          <Card
            className="projectList"
            style={{ margin: 12 }}
            title="进行中的案件"
            bordered={false}
            loading={projectLoading}
            bodyStyle={{ padding: 0 }}
          >
            {projectNotice.map((item: any) => (
              <Card.Grid className="projectGrid" key={item.id}>
                <Card bodyStyle={{ padding: 0 }} bordered={false}>
                  <Card.Meta
                    title={
                      <div className="cardTitle">
                        <Avatar size="small" src={item.logo} />
                      </div>
                    }
                    description={item.description}
                  />
                  <div className="projectItemContent">
                    {item.updatedAt && (
                      <span className="datetime" title={item.updatedAt}>
                        {moment(item.updatedAt).fromNow()}
                      </span>
                    )}
                  </div>
                </Card>
              </Card.Grid>
            ))}
          </Card>
          <Card
            bodyStyle={{ padding: 0 }}
            bordered={false}
            className="activeCard"
            title="动态"
            loading={activitiesLoading}
            style={{ margin: 12 }}
          >
            <List<any>
              loading={activitiesLoading}
              renderItem={item => renderActivities(item)}
              dataSource={activities}
              className="activitiesList"
              size="large"
            />
          </Card>
        </Col>
        <Col xl={8} lg={24} md={24} sm={24} xs={24}>
          <Card style={{ margin: 12 }} title="快速开始 / 便捷导航" bordered={false} bodyStyle={{ padding: 0 }}>
            <EditableLinkGroup
              onAdd={() => {
                console.log('66')
              }}
              links={links}
              linkElement={'a'}
            />
          </Card>
          <Card style={{ margin: 12 }} bordered={false} title="XX 指数" loading={radarData.length === 0}>
            <div className="chart">
              <Radar hasLegend height={343} data={radarData} />
            </div>
          </Card>
          <Card
            bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
            bordered={false}
            title="团队"
            loading={projectLoading}
            style={{ margin: 12 }}
          >
            <div className="members">
              <Row gutter={48}>
                {projectNotice.map((item: any) => (
                  <Col style={{ marginTop: 12 }} span={12} key={`members-item-${item.id}`}>
                    <Avatar src={item.logo} size="small" />
                    <span style={{ marginLeft: 10 }} className="member">
                      {item.member}
                    </span>
                  </Col>
                ))}
              </Row>
            </div>
          </Card>
        </Col>
      </Row> */}
    </PageContainer>
  )
}

export default PAGENAMEUPPERCAMELCASE
